<template>
  <div class="goodinfo-container">
    <Head></Head>
    <div class="goodinfo-main">
      <div class="showgood clearfix">
        <div class="left">
          <img :src="imgPath + good.image" alt="" srcset="" width="600" />
          <!-- <div class="carousel">
            <Carousel :max-width="600"></Carousel>
          </div> -->
        </div>
        <div class="right">
          <div class="name">
            <h1>{{ good.name }}</h1>
          </div>
          <div class="price" ref="priceRef">
            <!-- ¥{{ good.price[this.currentSize] }} -->
            ¥{{ good.price }}
          </div>
          <div class="store" ref="priceRef">
            <!-- ¥{{ good.price[this.currentSize] }} -->
            库存 {{ good.store }}
          </div>

          <div class="tools">
            <!-- 分享 -->
            <i title="分享" class="glyphicon glyphicon-share-alt"></i>
            <!-- 分享 -->
            <!-- 加入购物车 -->
            <!-- <i title="加入购物车" class="glyphicon glyphicon-shopping-cart"></i> -->

            <!-- 加入购物车 -->
            <!-- 收藏 -->
            <i
              title="取消收藏"
              class="glyphicon glyphicon-star"
              v-if="isStar"
              @click="deleteStar"
            ></i>
            <i
              title="收藏"
              class="glyphicon glyphicon-star-empty"
              v-if="!isStar"
              @click="addStar"
            ></i>
            <!-- 收藏 -->
          </div>
          <!-- 立即购买 -->
          <div class="buy">
            <v-btn
              x-large
              color="success"
              v-if="good.store"
              style="font-size: large"
              @click="
                totalAmount()
                orderShow = true
              "
            >
              <div>立即选购</div>
            </v-btn>

            <v-btn
              x-large
              disabled
              color="success"
              style="font-size: large"
              v-else
            >
              <div>暂无库存</div>
            </v-btn>
            <!-- 订单 -->
            <div>
              <div class="text-center">
                <v-dialog v-model="orderShow" width="auto">
                  <v-card>
                    <v-card-title>
                      <span class="text-h5">订单</span>
                    </v-card-title>
                    <v-card-text>
                      <v-container>
                        <v-row
                          ><v-select
                            label="地址"
                            v-model="addressBookId"
                            :items="addressInfo"
                            item-text="desp"
                            item-value="id"
                            @change="changeAddress"
                          ></v-select
                        ></v-row>
                        <v-row>
                          <GoodItem
                            :id="good.id"
                            :image="good.image"
                            :name="good.name"
                            :price="good.price"
                            :rand="good.rand"
                            :sales="good.sales"
                            :store="good.store"
                            style="width: 500px; font-size: large"
                          >
                            <ul class="btn-numbox">
                              <li>
                                <ul class="count">
                                  <li>
                                    <span
                                      id="num-jian"
                                      class="num-jian"
                                      @click="subtract()"
                                      >-</span
                                    >
                                  </li>
                                  <li>
                                    <input
                                      type="text"
                                      class="input-num"
                                      id="input-num"
                                      @change="totalAmount"
                                      v-model="order.number"
                                    />
                                  </li>
                                  <li>
                                    <span
                                      id="num-jia"
                                      class="num-jia"
                                      @click.stop="add"
                                      >+</span
                                    >
                                  </li>
                                </ul>
                              </li>
                            </ul>
                            <!-- <div class="button">
                              <v-btn color="success"> 立即选购 </v-btn>
                            </div> -->
                          </GoodItem>
                          <div
                            style="
                              font-size: 32px;
                              position: absolute;
                              bottom: 100px;
                              right: 100px;
                            "
                          >
                            共计{{ order.amount }}元
                          </div>
                        </v-row>
                      </v-container>
                    </v-card-text>
                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn
                        color="blue-darken-1"
                        variant="text"
                        @click="orderShow = false"
                      >
                        取消订单
                      </v-btn>
                      <v-btn
                        color="blue-darken-1"
                        variant="text"
                        @click="
                          orderShow = false
                          AddOrderGood()
                        "
                      >
                        加入购物车
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </div>
            </div>
            <!-- 订单 -->
          </div>
          <!-- 立即购买 -->
        </div>
      </div>
      <!-- 商品详情 -->
      <hr />
      <div class="detail">
        <h3>商品详情</h3>
        <p>{{ good.description }}</p>
        <!-- <p>
          商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1商品详情1
        </p>
        <p>商品详情2</p>
        <p>商品详情3</p> -->
      </div>
      <div class="comments">
        <h3>商品评论</h3>
        <!-- <ul>
          <li class="comment" v-for="item in comments" :key="item.id"> -->
        <GoodComment :goodId="this.goodId"></GoodComment>
        <!-- </li>
        </ul> -->
        <!-- <div class="addcomment clearfix">
          <textarea></textarea>
          <button>发表评论</button>
        </div> -->
      </div>
      <!-- 商品详情 -->
    </div>
  </div>
</template>

<script>
import Head from '@/components/Head.vue'
// import Carousel from '@/components/carousel/Carousel.vue'
import GoodComment from '@/components/goods/GoodComment.vue'
import GoodItem from '@/components/goods/GoodItem.vue'
import { getGoodApi } from '@/api/home'
import { getAddressApi } from '@/api/address'
import { addOrderGood, getOrder } from '@/api/order'
import { imgPath } from '@/utils/const'
import { addStarApi, checkStarApi, deleteStarApi } from '@/api/star'
export default {
  name: 'GoodInfo',
  components: {
    Head,
    // Carousel,
    GoodComment,
    GoodItem
  },
  // props: {
  //   currentSize: {
  //     type: String,
  //     default: '1个'
  //   }
  // },
  // computed() {
  //   this.totalAmount()
  // },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('userInfo')),
      goodId: this.$route.query.goodId,
      imgPath: imgPath,
      orderShow: false,
      order: {
        // orderId: this.user.orderId,
        goodId: this.$route.query.goodId,
        number: 1,
        amount: 0
      },
      isActive: false,
      dialog: false,
      addressBookId: 0,
      address: [],
      addressInfo: [],
      orderId: null,
      form: {
        id: 0
      },
      good: {
        name: '新鲜杨梅'
        // price: { '100个': 18, '200个': 28, '400个': 68, '600个': 78 },
        // isStar: false
      },
      sizes: [
        {
          id: 1,
          size: '100个'
        },
        {
          id: 2,
          size: '200个'
        },
        {
          id: 3,
          size: '400个'
        },
        {
          id: 4,
          size: '600个'
        }
      ],
      isStar: false,
      currentSize: '',
      comments: [
        '好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃',
        '好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃好吃',
        '好吃好吃'
      ]
    }
  },
  created() {
    // this.initCurrentSize()
    // this.form.id = this.$route.query.goodId
    this.getGood()
    this.getAddress()
    this.init()
    // console.log(1)
    // console.log(this.$route.query.id)
  },
  methods: {
    async addStar() {
      const res = await addStarApi({
        goodId: this.goodId,
        userId: JSON.parse(sessionStorage.getItem('user'))
      })
      this.isStar = true
      console.log(res)
    },
    async deleteStar() {
      const res = await deleteStarApi({
        goodId: this.goodId,
        token: sessionStorage.getItem('token')
      })
      this.isStar = false
      console.log(res)
    },
    async init() {
      const token = sessionStorage.getItem('token')
      await getOrder({ token, status: 1 }).then((res) => {
        this.orderId = res.data.data.id
        // console.log(this.order)
        // this.getGoods()
      })
      await checkStarApi({ token, goodId: this.goodId }).then((res) => {
        console.log(res)
        if (res.data.data.length === 0) this.isStar = false
        else this.isStar = true
      })
      // .then(() => {
      //   this.getGoods()
      // })
      // await getOrderGoodList(this.order.id).then((res) => {
      //   this.goods = res
      // })
    },
    async AddOrderGood() {
      this.order.orderId = this.orderId
      this.order.addressBookId = this.addressBookId
      // console.log(this.order)
      await addOrderGood(this.order)
        .then((response) => {
          console.log(response)
        })
        .then(() => {
          this.$router.push('/home')
        })
    },
    changeAddress() {
      // console.log(this.addressInfo)
      // console.log(this.addressBookId)
    },
    totalAmount() {
      if (this.order.number > this.good.store) {
        this.order.number = this.good.store
      }
      if (this.order.number < 0) {
        this.order.number = 0
      }
      this.order.amount = this.good.price * this.order.number
    },
    add() {
      if (this.order.number <= this.good.store) this.order.number++
      else this.order.number = this.good.store
      this.totalAmount()
    },
    subtract() {
      if (this.order.number > 0) this.order.number--
      else this.order.number = 0
      this.totalAmount()
    },
    async getAddress() {
      await getAddressApi(sessionStorage.getItem('token')).then((response) => {
        // console.log(response)
        if (response.data.data) {
          this.address = response.data.data
          this.address.forEach((addr) => {
            let str = ''
            str +=
              addr.consignee +
              ' ' +
              addr.phone +
              ' ' +
              addr.tblArea[0].provinceName +
              ' ' +
              addr.tblArea[0].cityName +
              ' ' +
              addr.tblArea[0].district +
              ' ' +
              addr.detail
            addr.desp = str
            this.addressInfo.push(addr)
          })
        } else {
          console.log(this.addressInfo)
          if (this.addressInfo.length === 0) {
            alert('请先创建地址')
            this.$router.push('/my/address')
          }
        }
      })
    },
    initCurrentSize() {
      this.currentSize = this.sizes[0].size
    },
    async getGood() {
      const { data: res } = await getGoodApi(this.$route.query.goodId)
      this.good = res.data
      console.log(this.good)
      // console.log(this.form)
    },

    changeSize(size) {
      this.currentSize = size
      this.$refs.priceRef.innerText = '¥' + this.good.price[size]
      // this.currentSize = this.good.price[]
    }
  }
}
</script>

<style lang="less" scoped>
@heightMargin: 20px;
.goodinfo-container {
  .goodinfo-main {
    // background: rgb(222, 182, 216);
    border: grey solid 1px;
    width: 1200px;
    margin: 0 auto;
    // height: 1000px;
    // display: flex;
    .showgood {
      // height: 700px;
      width: 100%;
      margin: 0 100px;
      // border-bottom: solid 1px black;
      .left {
        display: block;
        float: left;
        // width: 610px;
        .carousel {
          width: 600px;
          height: 600px;
          margin: 10px;
        }
        img {
          width: 400px;
          height: 400px;
          margin: 10px;
        }
      }
      .right {
        float: left;
        display: block;
        width: 320px;
        margin-left: 50px;
        .name {
          margin-bottom: @heightMargin;
        }
        .price {
          display: block;
          font-size: 32px;
          color: blue;
          margin-bottom: @heightMargin;
          // float: left;
        }
        .store {
          font-size: 16px;
          color: gray;
          margin: 10px;
        }
        .sizebt {
          margin-bottom: 180px;
        }
        .col {
          padding: 0;
          margin-bottom: @heightMargin;
        }
        .tools {
          font-size: 32px;
          display: flex;
          i {
            flex: 1;
            // margin: 10px;
          }
          margin-bottom: @heightMargin;
        }
        .buy {
          position: absolute;
          top: 400px;
          display: block;
          margin-left: 50px;
          // float: right;
        }
      }
    }
    .detail {
      margin: 10px auto;
      width: 90%;
    }
    .comments {
      margin: 10px auto;
      width: 90%;
      .comment {
        height: 100px;
      }
      .addcomment {
        textarea {
          width: 100%;
          height: 200px;
          border: 1px solid #000000;
        }
        button {
          display: block;
          width: 150px;
          height: 50px;
          background: yellow;
          margin: 10px;
          float: right;
        }
      }
    }
  }
}

.btn-numbox {
  // overflow: hidden;
  // margin-top: 20px;
}

.btn-numbox li {
  float: left;
}

.btn-numbox .count {
  overflow: hidden;
  // margin: 0 16px 0 -20px;
}

.btn-numbox .count .num-jian,
.input-num,
.num-jia {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  border: 1px solid #e6e6e6;
}
.btn-numbox .count .input-num {
  width: 100px;
  height: 26px;
  color: #333;
  border-left: 0;
  border-right: 0;
}
label {
  margin-bottom: 0;
}
</style>
